<template>
  <div class="home card">
    <div class="top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="主诊团队">
          <el-select v-model="zztdvalue" placeholder="" size="default" style="width: 180px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="患者">
          <el-input v-model="formInline.user" placeholder="" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchbutton">搜索</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="addbutton">新入患者</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="contentbox">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="近100天随访" name="1">
          <div class="table-box">
            <el-table :data="datalist" border style="width: 100%">
              <el-table-column prop="date" label="患者姓名" width="120">
                <template #default="scope">
                  <span class="hzbox" @click="hzxqbutton(scope.row)">{{ scope.row.date }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="收案时间" width="120" />
              <el-table-column prop="address" label="上次A1c" />
              <el-table-column prop="address" label="复诊状态" />
              <el-table-column prop="address" label="社保号" />
              <el-table-column prop="address" label="手机号" />
              <el-table-column prop="address" label="病型" />
              <el-table-column prop="address" label="病程(年)" />
              <el-table-column prop="address" label="距上次复诊" />
              <el-table-column prop="address" label="主诊医生" />
              <el-table-column prop="address" label="血糖仪" />
            </el-table>
            <div class="fybox">
              <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[10, 50, 100, 200]" layout="total, sizes, prev, pager" :total="400"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="近30天漏诊" name="2">
          <div class="table-box">
            <el-table :data="datalist" border style="width: 100%">
              <el-table-column prop="date" label="患者姓名" width="120">
                <template #default="scope">
                  <span class="hzbox" @click="hzxqbutton(scope.row)">{{ scope.row.date }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="收案时间" width="120" />
              <el-table-column prop="address" label="上次A1c" />
              <el-table-column prop="address" label="复诊状态" />
              <el-table-column prop="address" label="社保号" />
              <el-table-column prop="address" label="手机号" />
              <el-table-column prop="address" label="病型" />
              <el-table-column prop="address" label="病程(年)" />
              <el-table-column prop="address" label="距上次复诊" />
              <el-table-column prop="address" label="主诊医生" />
              <el-table-column prop="address" label="血糖仪" />

            </el-table>
            <div class="fybox">
              <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[10, 50, 100, 200]" layout="total, sizes, prev, pager" :total="400"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog v-model="dialogVisible" title="新增患者" width="400" :before-close="handleClose">
      <el-form :rules="rules" :model="form" label-width="auto" ref="ruleFormRef" style="max-width: 300px">
        <el-form-item label="社保号" prop="sbh">
          <el-input v-model="form.sbh" />
        </el-form-item>
        <el-form-item label="患者姓名" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" />
        </el-form-item>
        <el-form-item label="血糖仪:" prop="xty">
          <el-radio-group v-model="form.xty">
            <el-radio value="1">有</el-radio>
            <el-radio value="2">无</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="主诊团队" prop="zztd">
          <el-input v-model="form.zztd" />
          <el-select v-model="form.zztd" placeholder="">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="责任卫教:" prop="zrwj">
          <el-select v-model="form.zrwj" placeholder="">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="患者来源:" prop="hzly">
          <el-select v-model="form.hzly" placeholder="">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer savebox">
          <el-button @click="resetForm(ruleFormRef)">取消</el-button>
          <el-button type="primary" @click="savebutton">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="home">
import { ref, reactive } from "vue";
import { Delete, EditPen, Download, Upload, View, Refresh } from "@element-plus/icons-vue";
const router = useRouter();
const activeName = ref("1");
let dialogVisible = ref(false)
const handleClick = tab => {
  console.log(activeName.value);
};
let datalist = ref([
  {
    date: "张三",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  }
]);
const zztdvalue = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
const rules = reactive({
  sbh: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  name: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  xty: [
    { required: true, message: '请选择', trigger: 'change', },
  ],

  zrwj: [
    {
      required: true,
      message: '请选择',
      trigger: 'change',
    },
  ],


})
const ruleFormRef = ref(null)
const formInline = reactive({
  user: '',
  region: '',
  date: '',
})
let currentPage = ref(1)
let pageSize = ref(10)
let addbutton = () => {
  dialogVisible.value = true
}
const handleClose = () => {
  dialogVisible.value = false
}

let handleSizeChange = () => {
}
let handleCurrentChange = () => {
}
let hzxqbutton = (e) => {
  console.log(e)
  router.push({
    path: "/hzinfo"
  })
}
const form = reactive({
  sbh: '',
  name: '',
  phone: "",
  xty: "",
})
const searchbutton = () => {
  console.log('submit!')
}
const savebutton = async (formEl) => {
  ruleFormRef.value?.validate((valid) => {
    if (valid) {
      console.log('submit!', form)
      // 在这里处理表单提交逻辑
      dialogVisible.value = false
    } else {
      ElMessage.error('请检查表单信息')
    }
  })
}
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
  dialogVisible.value = false
}

</script>

<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;

  .contentbox {
    width: 100%;
    height: 300px;
  }

  .szbox {
    justify-content: end;
    display: flex;
  }
}

.card {
  padding: 25px;
}

.hzbox {
  color: #409EFF;
  cursor: pointer;
}

.savebox {
  display: flex;
  justify-content: center;
}
</style>
